<template>
  <BaseMainSlot
    v-loading="isShowData"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <template v-slot:searchbox>
      <div class="seach-box">
        <div class="select-box-content">
          <div class="select-box-content-name">标题：</div>
          <el-input
            v-model="title"
            clearable
            placeholder="请输入标题"
            @change="queryPageList()"
          />
        </div>
        <div class="select-box-content">
          <div class="select-box-content-name">设备类型：</div>
          <el-cascader
            v-model="equipmentTypeCode"
            :props="defaultProps"
            :options="equipmentTypeList"
            :show-all-levels="false"
            clearable
            @change="queryPageList()"
          />
        </div>
      </div>
    </template>

    <template slot="contentTitle">
      <div v-if="!showDetail" class="info-box-title">知识列表</div>
    </template>
    <template v-slot:content>
      <div v-if="!showDetail" class="info-box-con">
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="info-box-con-one"
          @click="handleEdit(item)"
        >
          <div class="info-box-con-one-left">
            <svg-icon icon-class="library-icon" />
            <p>{{ item.title }}</p>
          </div>
          <p>{{item.processMode }}</p>
        </div>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
      <div v-if="showDetail" class="article-box">
        <img
          src="~@/assets/machine/cancelback.png"
          alt
          class="cancelback"
          @click="back()"
        />
        <div class="article-title w100p">{{ formData.title }}</div>
        <div class="w100p article-title-an">
          <p>设备类型名称：{{ formData.equipmentTypeName }}</p>
          <p>设备型号： {{ formData.modelName }}</p>
        </div>
        <div class="article-content w100p"></div>
        <div class="article-content w100p">
          <p>处理方法：</p>
          <p>{{ formData.processMode }}</p>
        </div>
        <div class="article-content w100p">
          <p>备注：</p>
          <p>{{ formData.description }}</p>
        </div>
        <div class="data-info-box">
          <div v-if="pictureList.length > 0" class="article-content w100p">
            <p>图片:</p>
            <div class="data-info-box-img">
              <img
                v-for="(item, index) in pictureList"
                :key="index + 'pic'"
                :src="item.url"
                class="picture-con"
              />
            </div>
          </div>
          <div v-if="pdfList.length > 0" class="article-content w100p">
            <p>文件:</p>
            <div class="data-info-box-img">
              <img
                v-for="(item, index) in pdfList"
                :key="index"
                :src="item.url"
                class="picture-con"
                @click="click(item.url)"
              />
            </div>
          </div>
          <div v-if="videoList.length > 0" class="article-content w100p">
            <p>视频:</p>
            <div class="data-info-box-img">
              <video
                v-for="(item, index) in videoList"
                :key="index + 'video'"
                :src="item.url"
                @click="clickVideo(item.url)"
              ></video>
            </div>
          </div>
          <div
            v-if="
              pictureList.length === 0 &&
                pdfList.length === 0 &&
                videoList.length === 0 &&
                isShowData === false
            "
            class="empty-box"
          >暂无视频、图片等资料</div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import repairExpertLibraryApi from "@/api/equip-repair-support/repair-expert-library";
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue";
import { mymixin } from "@/utils/mixin";
import equipTypeApi from "@/api/equip-manage/equip-type/index";

export default {
  name: "RepairExpertLibrary",
  components: { Pagination, BaseMainSlot },
  mixins: [mymixin],
  data() {
    return {
      title: "",
      showDetail: false,
      content: "",
      defaultProps: {
        children: "childList",
        value: "equipmentTypeCode",
        label: "equipmentTypeName",
        emitPath: false,
        checkStrictly: true,
      },
      equipmentTypeCode: "",
      equipmentTypeList: [],
      formData: {},
      pictureList: [],
      videoList: [],
      pdfList: [],
      isShowData: false,
    };
  },
  watch: {},
  created() {
    this.queryPageList();
    this.queryEquipmentType();
  },
  mounted() {},
  methods: {
    // 关联设备类型
    queryEquipmentType() {
      this.loading = false;
      // 获取数据
      let param = {};
      equipTypeApi.queryTree(param).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || [];
          this.equipmentTypeList = data;
          this.filterTreeKey(
            this.equipmentTypeList,
            this.defaultProps.children
          );
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    queryPageList() {
      this.loading = false;
      // 获取数据
      let param = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          equipmentTypeCode: this.equipmentTypeCode,
          title: this.title,
        },
      };
      repairExpertLibraryApi.queryPageList(param).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          this.tableData = data.content || [];
          // for (let i = 0; i < 12; i++) {
          //   this.tableData.push(data.content);
          // }
        }
      });
    },

    handleEdit(row) {
      this.tableData.forEach((element) => {
        element.color = "rgba(0,0,0,0)";
      });
      this.$set(row, "color", "#02989A");
      this.tableData = [...this.tableData];
      this.showDetail = true;
      this.formData = JSON.parse(JSON.stringify(row));
      this.queryByRepairKnowledgeCode(row.repairKnowledgeCode);
    },
    // 根据维修知识库编码查询影像数据
    queryByRepairKnowledgeCode(a) {
      // 获取数据
      var form = new FormData();
      form.append("repairKnowledgeCode", a);
      this.isShowData = true;
      repairExpertLibraryApi.queryByRepairKnowledgeCode(form).then((res) => {
        this.isShowData = false;
        if (res.code === 1) {
          let data = res.data || {};
          this.pictureList = [];
          this.videoList = [];
          this.pdfList = [];
          if (data.length > 0) {
            data.forEach((a) => {
              a.name = a.pictureName;
              if (a.url.includes("common/file/upDown/videoView")) {
                // a.url = this.deal(a["imageData"]);
                this.videoList.push(a);
              } else if (a.url.includes("common/file/upDown/view")) {
                // a.url = "data:application/*;base64," + a.imageData;
                this.pictureList.push(a);
              } else if (a.pictureType === "application/pdf") {
                a.url =
                  "data:application/pdf;base64," + this.deal(a["imageData"]);
                this.pdfList.push(a);
              }
            });
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    back() {
      this.showDetail = false;
    },
    deal(data) {
      // 获取到了blob对象
      let blob = this.base64ToBlob(data);
      // 获取当前url，直接放到iframe就能用，下载同理
      let blobURL = window.URL.createObjectURL(blob);
      return blobURL;
    },
    base64ToBlob(code) {
      // Base64一行不能超过76字符，超过则添加回车换行符。因此需要把base64字段中的换行符，回车符给去掉，有时候因为存在需要把加号空格之类的换回来，取决于base64存取时的规则。
      code = code.replace(/[\n\r]/g, "");
      var raw = window.atob(code);
      let rawLength = raw.length;
      // 转换成能直接解析的Uint8Array类型
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: "video/mp4" });
    },
    clickVideo(data) {
      window.open(data, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.info-box-title {
  position: relative;
  padding: 6px 0 6px 48px;
  color: #00fff7;
  font-size: 18px;
  height: 57px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  background-color: $hamburgerBgColor;
  &:before {
    content: "";
    position: absolute;
    width: 7px;
    height: 30px;
    left: 31px;
    top: 14px;
    background-color: #00fff7;
  }
}
.info-box-con {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 10px);
  max-height: 700px;
  padding: 0px 20px;
  // border-bottom: 30px solid $contentColor;
  font-weight: 400;
  letter-spacing: 2px;
  overflow-y: auto;
  .info-box-con-one {
    width: 19%;
    height: 48%;
    display: flex;
    flex-direction: column;
    background-position: 50%;
    background-image: url("~@/assets/repair-support/insect.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    justify-content: space-around;
    align-items: center;
    // box-shadow: inset 0px 0px 8px 1px #00FFF7;
    // border-radius: 5px 5px 5px 5px;
    // opacity: 1;
    // border: 1px solid #00FFF7;
    padding: 0 22px;
    margin-bottom: 10px;
    margin-right: 20px;
    font-size: 18px;
    // margin: 16px 0;
    &:nth-child(5n) {
      margin-right: 0;
    }
    > p {
      width: 100%;
      height: 100%;
      white-space: wrap;
      overflow: auto;
    }
    .info-box-con-one-left {
      display: flex;
      align-items: center;
      > p {
        margin-left: 10px;
      }
    }
    > .info-box {
      width: 100%;
      height: 100%;
      // overflow-y: hidden;
      white-space: wrap;
      display: -webkit-box; //谷歌
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 10; //显示几行
      overflow: hidden;
    }
  }
}
.cancelback {
  position: absolute;
  height: 34px;
  width: auto;
  top: 0;
  right: 0;
  cursor: pointer;
  right: 20px;
  &:hover {
    transform: scale(1.1);
  }
}
.article-box {
  padding: 0 5%;
  width: 100%;
}
.article-title {
  font-size: 22px;
  font-weight: bold;
  color: #00fff7;
  line-height: 33px;
  letter-spacing: 5px;
  text-align: center;
}
.article-content {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;

  > p {
    margin: 5px;
    &:first-child {
      white-space: nowrap;
      min-width: 100px;
    }
    &:nth-child(2) {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .data-info-box-img {
    max-width: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    > video {
      width: 100%;
    }
    > img {
      width: 100%;
    }
  }
}

.article-title-an {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  > p {
    margin: 20px 10px 30px;
    padding: 0 20px;
    &:first-child {
      border-right: 1px solid #00fff7;
      padding-right: 25px;
    }
  }
}
.data-info-box {
  width: 100%;
}
.empty-box {
  font-size: 22px;
  color: red;
  width: 100%;
  text-align: center;
}
::v-deep .el-collapse-item__header {
  height: 0px;
}
::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}
::v-deep .seach-box {
  padding: 10px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0px;
  bottom: -18px;
}
</style>
